<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width='800'
    :visible='visible'
    :confirm-loading='loading'
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
    <a-form
      layout='horizontal'
      ref='form'
      :model='form'
      :rules='rules'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >

      <a-form-item label='牛号:' name='cattleNo'>
        <a-input v-model:value='form.cattleNo' placeholder='请输入牛号(可视耳标)' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='耳标号1:' name='earOne'>
        <a-input v-model:value='form.earOne' placeholder='请输入电子耳标号1' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='耳标号2:' name='earTwo'>
        <a-input v-model:value='form.earTwo' placeholder='请输入电子耳标号2' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='温度计序列号:' name='thermNo'>
        <a-input v-model:value='form.thermNo' placeholder='请输入温度计序列号' allow-clear autocomplete='off' />
      </a-form-item>

      <a-form-item label="所属牧场:" name="ranchId">
        <a-select
          show-search
          v-model:value="form.ranchId"
          placeholder="请选择所属牧场"
          style="width: 100%"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @change="selectRanch"
        >
          <a-select-option v-for="item in ranchList" :key="item.ranchId" >
            {{ item.ranchName }}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item label="所属牛舍:" name="oxtId">
        <a-select
          show-search
          v-model:value="form.oxtId"
          placeholder="请选择所属牛舍"
          style="width: 100%"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @change="selectOxtall"
        >
          <a-select-option v-for="item in oxtallList" :key="item.oxtallId" >
            {{ item.oxtallName }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="所属区域:" name="areaId">
        <a-select
          show-search
          v-model:value="form.areaId"
          placeholder="请选择所属区域"
          style="width: 100%"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
        >
          <a-select-option v-for="item in areaList" :key="item.areaId" >
            {{ item.areaName }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="所属牛群:" name="herdId">
        <a-select
          show-search
          v-model:value="form.herdId"
          placeholder="请选择所属牛群"
          style="width: 100%"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
        >
          <a-select-option v-for="item in herdList" :key="item.herdId" >
            {{ item.herdName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='录入来源:' name='inputSource'>
        <a-select
          show-search
          v-model:value="form.inputSource"
          placeholder="请选择录入来源"
          style="width: 100%"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          allow-clear
        >
          <a-select-option value="0" >其他</a-select-option>
          <a-select-option value="1" >后台</a-select-option>
          <a-select-option value="2" >小程序(读写棒)录入</a-select-option>
          <a-select-option value="3" >挤奶厅录入</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='出生日期:' name='birthday'>
        <a-date-picker v-model:value="form.birthday" placeholder='请输入出生日期' value-format="YYYY-MM-DD"  allow-clear autocomplete='off' />
      </a-form-item>

      <a-form-item label='围栏:' name='fence'>
        <a-input v-model:value='form.fence' placeholder='请输入围栏编号或位置' allow-clear autocomplete='off' />
      </a-form-item>

      <a-form-item label='备注:' name='remark'>
        <a-textarea v-model:value='form.remark' allow-clear autocomplete='off' />
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script>
import { CattleApi } from '@/api/property/cattlemanager/CattleApi';
import {CattleHerdApi} from '@/api/property/cattlemanager/CattleHerdApi';
import { message } from 'ant-design-vue';
import {OxtallApi} from "@/api/property/OxtallApi";
import {RanchApi} from "@/api/property/RanchApi";
import {AreaApi} from "@/api/property/AreaApi";

export default {
  name: 'CattleManagerCattleEdit',
  components: {
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  async mounted() {
    let _ranchList  = await RanchApi.list({})
    this.ranchList = (_ranchList ? _ranchList.data : null) || [];
    if (this.form.ranchId) {
      OxtallApi.list({"orgId" : this.form.ranchId}).then(result => {
        this.oxtallList = (result ? result.data : null) || [];
      }).catch((err) => {
        console.log(err)
      });
    }
    if (this.form.oxtId) {
      AreaApi.list({"oxtId" : this.form.oxtId})
        .then(result => {
          this.areaList = (result ? result.data : null) || [];
        })
        .catch((err) => {
          console.log(err)
        });
    }

    CattleHerdApi.list({}).then(result => {
      this.herdList = (result ? result.data : null) || [];
    }).catch((err) => {
      console.log(err)
    });
  },
  created() {
    if (this.data) {
      this.form = Object.assign({}, this.data);
      if (this.form.oxtId <= 0) {
        this.form.oxtId = undefined;
      }
      if (this.form.ranchId <= 0) {
        this.form.ranchId = undefined;
      }
      if (this.form.areaId <= 0) {
        this.form.areaId = undefined;
      }
      if (this.form.herdId <= 0) {
        this.form.herdId = undefined;
      }
      this.form.inputSource = this.form.inputSource + "";
      this.isUpdate = true;
    } else {
      this.isUpdate = false;
    }
    if (this.$refs.form) {
      this.$refs.form.clearValidate();
    }
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        cattleNo: [{ required: true, message: '请输入牛舍ID(可视耳标)', type: 'string', trigger: 'blur' }],
        ranchId: [{ required: true, message: '请输入所属牧场', trigger: 'blur' }],
        oxtId: [{ required: true, message: '请输入所属牛舍', trigger: 'blur' }],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      ranchList : [],
      oxtallList : [],
      areaList : [],
      herdList : []
    };
  },
  methods: {
    /**
     * 保存和编辑
     *
     * @author cancan
     * @date 2023/03/18 20:10
     */
    async save() {
      console.log(this.form);
      // 校验表单
      await this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;

      let result = null;

      // 执行编辑或修改
      if (this.isUpdate) {
        result = CattleApi.edit(this.form);
      } else {
        result = CattleApi.add(this.form);
      }
      result
        .then(result => {
          // 移除加载框
          this.loading = false;

          // 提示添加成功
          message.success(result.message);

          // 如果是新增，则form表单置空
          if (!this.isUpdate) {
            this.form = {};
          }

          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false);

          // 触发父组件done事件
          this.$emit('done');
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author cancan
     * @date 2023/03/18 20:10
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    selectRanch(ranchId) {
      this.oxtallList = [];
      this.areaList = []
      this.form.oxtId = undefined;
      this.form.areaId = undefined;
      OxtallApi.list({"orgId" : ranchId}).then(result => {
        this.oxtallList = (result ? result.data : null) || [];
      }).catch((err) => {
        console.log(err)
      });
    },
    selectOxtall(oxtallId) {
      this.areaList = []
      this.form.areaId = undefined;
      AreaApi.list({"oxtId" : oxtallId})
        .then(result => {
          this.areaList = (result ? result.data : null) || [];
        })
        .catch((err) => {
          console.log(err)
        });
    }

  }
};
</script>
